<template>
    <div class="second_level_page order_detail_page">
        <section class="order_state">
            <div class="state_text">
                <div class="active">已订货</div>
                <div>已发货</div>
                <div>已验货</div>
                <div>已收款</div>
                <div>已收货</div>
            </div>
            <div class="bottom clear">
                <span class="line"><em><img src="../../images/processIcon.png"></em></span>
                <!-- 程序注意，橘色条左右移动，修改left:20%; -->
            </div>
        </section>
        <section class="order_info">
            <div><span>采购单号：</span>025648292136521</div>
            <div><span>付款方式：</span>货到付款</div>
            <div><span>创建时间：</span>2016/10/10 10:10:10</div>
            <div><span>备注信息：</span>备注</div>
        </section>
        <section class="order_info">
            <div><span>店铺信息：</span>人人便利</div>
            <div><span>收货信息：</span></div>
            <div class="contacter">吴某某&nbsp;&nbsp;&nbsp;13256895855</div>
            <div class="address">撒富士达该订饭个人撒富士达该订饭个人撒富士达该订饭个人撒富士达该订饭个人化</div>
        </section>  
        <section class="goods_info">
            <div class="title warehouseTitle">
                C41010000002001
                <svg>
                    <use :xlink:href="'#moreArrowBlack'"></use>
                </svg>
            </div>
            <div class="goods_list">
                <div class="goods_demo">
                    <div>
                        <div class="goods_demo-left left">
                            <img src="../../images/goodsDefault.png">
                        </div>
                        <div class="goods_demo-right">
                            <div class="goods_name ellipsis">商品名称</div>
                            <div class="goods_sku_sale">
                                <span class="goods_sku">规格</span>
                            </div>
                            <div class="goods_price_buy">
                                <div class="goods_price left"> ￥100.00</div>
                                <div class="goods_buy right">
                                    ×3
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
                <div class="goods_demo">
                    <div>
                        <div class="goods_demo-left left">
                            <img src="../../images/goodsDefault.png">
                        </div>
                        <div class="goods_demo-right">
                            <div class="goods_name ellipsis">商品名称</div>
                            <div class="goods_sku_sale">
                                <span class="goods_sku">规格</span>
                            </div>
                            <div class="goods_price_buy">
                                <div class="goods_price left"> ￥100.00</div>
                                <div class="goods_buy right">
                                    ×3
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
                <div class="goods_total">
                    共27件商品&nbsp;&nbsp;&nbsp;合计：<span>￥432.00</span>
                </div>           
            </div>
        </section>
        <section class="goods_info">
            <div class="title">
                验货未通过
                <svg>
                    <use :xlink:href="'#moreArrowBlack'"></use>
                </svg>
            </div>
            <div class="goods_list">
                <div class="goods_demo">
                    <div>
                        <div class="goods_demo-left left">
                            <img src="../../images/goodsDefault.png">
                        </div>
                        <div class="goods_demo-right">
                            <div class="goods_name ellipsis">商品名称</div>
                            <div class="goods_sku_sale">
                                <span class="goods_sku">规格</span>
                            </div>
                            <div class="goods_price_buy">
                                <div class="goods_price left"> ￥100.00</div>
                                <div class="goods_buy right">
                                    ×3
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
                <div class="goods_demo">
                    <div>
                        <div class="goods_demo-left left">
                            <img src="../../images/goodsDefault.png">
                        </div>
                        <div class="goods_demo-right">
                            <div class="goods_name ellipsis">商品名称</div>
                            <div class="goods_sku_sale">
                                <span class="goods_sku">规格</span>
                            </div>
                            <div class="goods_price_buy">
                                <div class="goods_price left"> ￥100.00</div>
                                <div class="goods_buy right">
                                    ×3
                                </div>
                            </div>
                        </div>
                    </div>
                </div>            
            </div>
        </section>
        <section class="money_info">
            <div class="money_demo clear">
                <div class="left">物流费用</div>
                <div class="right">￥5.00</div>
            </div>
            <div class="money_demo clear">
                <div class="left">提货券</div>
                <div class="right">￥-10.00</div>
            </div>
            <div class="money_demo clear">
                <div class="left">优惠金额</div>
                <div class="right">￥-20.00</div>
            </div>
            <div class="total_money_demo clear">
                <div class="left">应付款</div>
                <div class="right total_money_value">￥280.00</div>
            </div>
            <div class="money_demo clear">
                <div class="left">退款金额</div>
                <div class="right total_money_value">￥0.00</div>
            </div>
            <div class="total_money_demo clear">
                <div class="left">实付款</div>
                <div class="right total_money_value">0.00</div>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
      data(){
            return{
            }
        },
        components: {
        },
        methods: {
        },
    }
</script>
  
<style lang="scss" scoped>
    @import 'src/style/mixin';

    .order_state{
        @include wh(100%, 1.7rem);
        background: #fff;
        margin-bottom: .2rem;
        padding: .32rem .26rem 0;
        .state_text{
            display: flex;
            margin-bottom: .24rem;
            div{
                flex: 1;
                @include sc(.24rem, #666);
                text-align: center;
                height: .46rem;
                line-height: .36rem;
            }
            div.active{
                background: url(../../images/lineIcon.png) no-repeat center;
                background-size: .96rem .46rem;
                color: #fff;
            }
        }
        .bottom{
            width:100%;
            margin:0 auto;
            .line{
                display:block;
                position:relative;
                background:#f4f4f4;
                border: .01rem solid #ccc;
                border-radius: .08rem;
                width:100%;
                height:.16rem;
                em{
                    display:block;
                    position:absolute; 
                    top:0; 
                    background:$blue;
                    width: 20%;
                    height: .14rem;
                    border-radius: .07rem;
                    img{
                        position: absolute;
                        right: 0;
                        z-index: 100;
                        @include wh(.46rem, .46rem);
                        margin-top: -.18rem;
                        margin-right: -.23rem;
                    }
                }
            }
        }
    }
    .order_info{
        background: #fff;
        padding: .15rem .2rem;
        line-height: .58rem;
        margin-bottom: .2rem;
        @include sc(.28rem, #333);
        span{
            color: #666;
        }
        .address{
            line-height: .38rem;
        }
    }
    .goods_info{
        background: #fff;
        margin-bottom: .2rem;
        .title{
            @include wh(100%, .76rem);
            @include sc(.28rem, #333);
            border-bottom: .01rem solid #e3e3e3;
            line-height: .76rem;
            padding-left: .2rem;
            svg{
                @include wh(.14rem, .24rem);
                margin-left: .1rem; 
            }
        }
        .warehouseTitle{
            color: #666;
        }
        .goods_list{
            .goods_demo{
                @include wh(100%, 2.1rem);
                background: #fff;
                clear: both;
                border-bottom: .01rem solid #e3e3e3;
                .goods_demo-left{
                    margin: .2rem;
                    @include wh(1.7rem, 1.7rem);
                    img{
                        @include wh(100%, 100%);
                    }
                }
                .goods_demo-right{
                    padding-top: .3rem;
                    padding-left: 2.1rem;
                    margin-right: .2rem;
                    .goods_name{
                        @include sc(.3rem, #333);
                        line-height: .3rem;
                        height: .3rem;
                    }
                    .goods_sku_sale{
                        margin-top: .2rem;
                        height: .24rem;
                        line-height: .24rem;
                        @include sc(.24rem, #999);
                        .goods_sku{
                            margin-right: .28rem;
                            @include sc(.24rem, #999);
                        }
                        .goods_sale{
                            @include sc(.24rem, #999);
                        }
                    }
                    .goods_price_buy{
                        height: .54rem;
                        margin-top: .35rem;
                        line-height: .54rem;
                        .goods_price{
                            display: inline-block;
                            @include sc(.36rem, $blue);
                        }
                        .goods_buy{
                            @include sc(.28rem, #999);
                            text-align: center;
                            margin-right: .2rem;
                        }
                    }
                }
            }
            .goods_demo:last-child{
                border-bottom: 0;
            }
            .goods_total{
                @include wh(100%, .9rem);
                @include sc(.28rem, #999);
                line-height: .9rem;
                text-align: right;
                padding-right: .2rem;
                border-bottom: .01rem solid #ebebeb;
                span{
                    color: $blue;
                }
            }
        }
    }
    .money_info{
        background: #fff;
        margin-bottom: .2rem;
        padding: .15rem .2rem;
        .money_demo{
            div{
                @include sc(.28rem, #999);
                line-height: .58rem;
            }
        }
        .total_money_demo{
            div{
                @include sc(.3rem, #333);
                line-height: .6rem;
                font-weight: bold;
            }
            .total_money_value{
                color: $blue;
            }
        }
    }
    .confirm_btn{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: .96rem;
        @include sc(.32rem, #fff);
        line-height: .96rem;
        background: $orange;
        text-align: center;
    }  
</style>
